<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<title>地图遮罩</title>
	<script>
		window._AMapSecurityConfig = {
			securityJsCode: '7242476b0ce861600a241ba5f643e11f',
			plugins: ['AMap.AutoComplete', "AMap.Object3DLayer", "AMap.Object3D"],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等

		}
	</script>
	<style>
		html,
		body,
		#container {
			margin: 0;
			height: 100%;
		}
	</style>
</head>

<body>
	<div>
		<input id="input" type="text" value="龙华区">
		<button onclick="click">搜索</button>
	</div>
	<div id="container"></div>
	<script
		src="https://webapi.amap.com/maps?v=1.4.15&key=aa88c5cd817f5d2073b14f88dacb25ce&plugin=AMap.DistrictSearch"></script>
	<script>

		const btn = document.querySelector('button');
		btn.onclick = click
		click()
		function click() {
			var map = new AMap.Map('container', {
			zoom: 10,
			pitch: 0,
			viewMode: '3D',
			//设置地图背景图 
			mapStyle: 'amap://styles/40035571fa9fdd05a26fe1b05f48fdc9'

		});
			const inputValue = document.getElementById("input").value;
			//map.setZoom(12.2); //设置地图层级
			new AMap.DistrictSearch({
				extensions: 'all',
				subdistrict: 0
				// 搜索名字
			}).search(inputValue, function (status, result) {
				// 外多边形坐标数组和内多边形坐标数组
				var outer = [
					new AMap.LngLat(-360, 90, true),
					new AMap.LngLat(-360, -90, true),
					new AMap.LngLat(360, -90, true),
					new AMap.LngLat(360, 90, true),
				];
				var holes = result.districtList[0].boundaries //坐标数据
				console.log(result.districtList);
				map.setCenter(result.districtList[0].center); //设置中心店
				var pathArray = [
					outer
				];
				pathArray.push.apply(pathArray, holes)
				var polygon = new AMap.Polygon({
					pathL: pathArray,
					strokeColor: 'rgb(20,164,173)',
					strokeWeight: 4,
					strokeOpacity: 0.5,
					fillColor: 'rgba(0,0,0)',
					fillOpacity: 1,
					strokeStyle: 'dashed',

					strokeDasharray: [10, 2, 10]
				});
				polygon.setPath(pathArray);
				map.add(polygon);

			})
		}

	</script>
	
</body>

</html>